<template>
  <div class="nav-wrap">
    <el-row :gutter="24">
      <el-col :class="{'active-nav':index === hover}" v-for="(item,index) in nav" :key="item.id" :span="item.span"
              class="col-nav"
              @click="targetPath(item,index)">
        <div v-if="item.id === 0">
          <img src="@/assets/img/logo_white.png" style="width: 160px" alt=""/>
        </div>
        <div v-else class="flex-center">
          <span>{{ item.name }}</span>
        </div>
      </el-col>
      <div class="avatar-pointer">
        <div v-if="isLogin">
          <span class="username" >{{userInfo.username}}</span>
          <user-header-nav :userInfo="userInfo"/>
        </div>
        <div class="flex-center col-nav" v-else>
          <span type="primary" @click="loginVisible = !loginVisible">登录</span>
        </div>
      </div>
    </el-row>
    <el-dialog v-model="loginVisible" title="登录" center :modal="false">
      <login @loginSuccess="success" />
    </el-dialog>
  </div>

</template>

<script scoped setup>
import {nav} from "@/assets/js/nav.js";
import {logout} from "../assets/api/userApi";
import {useRouter} from "vue-router";
import {ref, computed} from "vue";
import UserHeaderNav from "@/views/userPage/userHeaderNav.vue";
import Login from "@/views/login.vue";

const userInfo = computed(() => JSON.parse(localStorage.userInfo || false))
const isLogin = computed(() => JSON.parse(localStorage.isLogin || false));
const searchText = ref('');
const router = useRouter();
const hover = ref(1)
const loginVisible = ref(false)

const targetPath = (item, index) => {
  if (item.id !== 0) {
    hover.value = index
    router.push(item.path)
  } else router.push('/')
}
const success = value => {
  loginVisible.value = false;
}
const logoutHandler = () => {
  logout(userInfo.value).then((res) => {
    loginVisible.value = true;
    localStorage.removeItem('userInfo')
    localStorage.removeItem('isLogin')
    localStorage.removeItem('token')
    router.push('/');
  });
};

const search = () => {
  if (!searchText.value) {

  } else {
    router.push({path: '/searchPage', query: {searchText: searchText.value}})
  }

}

</script>
<style scoped>
.username{
  position: fixed;
  right: 4%;
  top: 13px;
}
.nav-wrap {
  position: relative;
  top: 0;
  min-width: 100%;
  height: 60px;
  background: #adb3fb;
}

.col-nav {
  height: 60px;
  color: white;
  cursor: pointer;
}

.col-nav .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center span {
  position: fixed;
  top: 15.13px;
}

.avatar-pointer {
  position: fixed;
  right: 9%;
  top: 2.12px;
}

.active-nav {
  background: #adb3fb;
  cursor: pointer;
}

.login-box-words button {
  width: 85px;
}

</style>
